<template>
  <div class="question-detail-container">
    <el-row :gutter="20">
      <!-- 左侧问题详情 -->
      <el-col :span="16">
        <el-card class="question-card">
          <template #header>
            <div class="card-header">
              <div class="question-info">
                <h2>{{ question.title }}</h2>
                <div class="question-meta">
                  <div class="meta-item">
                    <el-icon><User /></el-icon>
                    <span>{{ question.userName }}</span>
                  </div>
                  <div class="meta-item">
                    <el-icon><Clock /></el-icon>
                    <span>{{ formatDate(question.createTime) }}</span>
                  </div>
                  <div class="meta-item">
                    <el-icon><View /></el-icon>
                    <span>{{ question.viewCount }} 浏览</span>
                  </div>
                  <div v-if="question.courseTitle" class="meta-item">
                    <el-icon><Collection /></el-icon>
                    <span>{{ question.courseTitle }}</span>
                  </div>
                </div>
              </div>
              <div class="question-actions">
                <el-tag
                  :type="getQuestionStatusType(question.status)"
                  size="small"
                >
                  {{ getQuestionStatusText(question.status) }}
                </el-tag>
                <el-button
                  v-if="canDeleteQuestion(question)"
                  type="danger"
                  size="small"
                  @click="deleteQuestion(question.id)"
                  style="margin-left: 10px;"
                >
                  删除
                </el-button>
              </div>
            </div>
          </template>

          <div class="question-content">
            <div class="content-text" v-html="getSanitizedContent(question.content)"></div>
          </div>

          <div class="question-footer">
            <div class="question-tags" v-if="question.tags && question.tags.length > 0">
              <el-tag
                v-for="tag in question.tags"
                :key="tag"
                type="info"
                size="small"
              >
                {{ tag }}
              </el-tag>
            </div>
            <div class="question-actions">
              <el-button
                :icon="Star"
                @click="likeQuestion"
                :type="isLiked ? 'primary' : 'default'"
              >
                {{ question.likeCount }}
              </el-button>
              <el-button
                :icon="Share"
                @click="shareQuestion"
              >
                分享
              </el-button>
            </div>
          </div>
        </el-card>

        <!-- 回答列表 -->
        <el-card class="answers-card">
          <template #header>
            <div class="card-header">
              <h3>{{ question.answerCount }} 个回答</h3>
              <div class="sort-options">
                <el-select
                  v-model="answerSort"
                  size="small"
                  @change="sortAnswers"
                >
                  <el-option label="默认排序" value="default" />
                  <el-option label="按点赞数" value="likes" />
                  <el-option label="按时间" value="time" />
                </el-select>
              </div>
            </div>
          </template>

          <div class="answers-list">
            <div
              v-for="answer in answers.filter(a => !a.parentAnswerId)"
              :key="answer.id"
              class="answer-item"
              :class="{ accepted: answer.isAccepted }"
            >
                            <div class="answer-header">
                <div class="user-info">
                  <el-avatar :size="40">{{ answer.userName?.charAt(0) }}</el-avatar>
                  <div class="user-details">
                    <p class="user-name">{{ answer.userName }}</p>
                    <p class="answer-time">{{ formatDate(answer.createTime) }}</p>
                  </div>
                </div>
                <div class="answer-actions">
                  <el-button
                    v-if="answer.isAccepted"
                    type="success"
                    size="small"
                    disabled
                  >
                    <el-icon><Check /></el-icon>
                    最佳答案
                  </el-button>
                  <el-button
                    v-else-if="canAcceptAnswer"
                    type="primary"
                    size="small"
                    @click="acceptAnswer(answer.id)"
                  >
                    采纳为最佳答案
                  </el-button>
                </div>
              </div>

              <div class="answer-content">
                <div class="content-text" v-html="getSanitizedAnswerContent(answer)"></div>
              </div>

              <div class="answer-footer">
                <div class="answer-actions">
                  <el-button
                    :icon="Star"
                    @click="likeAnswer(answer.id)"
                    :type="isAnswerLiked(answer.id) ? 'primary' : 'default'"
                    size="small"
                  >
                    {{ answer.likeCount }}
                  </el-button>
                  <el-button
                    :icon="ChatLineRound"
                    @click="replyToAnswer(answer.id)"
                    size="small"
                  >
                    回复
                  </el-button>
                                    <el-button
                    v-if="canDeleteAnswer(answer)"
                    type="danger"
                    size="small"
                    @click="deleteAnswer(answer.id)"
                    style="margin-left: 10px;"
                  >
                    删除
                  </el-button>
                  <el-button
                    v-if="answers.filter(a => a.parentAnswerId === answer.id).length > 0"
                    :icon="expandedReplies.has(answer.id) ? ArrowDown : ArrowRight"
                    @click="toggleReplyExpansion(answer.id)"
                    size="small"
                    type="text"
                  >
                    {{ expandedReplies.has(answer.id) ? '收起回复' : `查看 ${answers.filter(a => a.parentAnswerId === answer.id).length} 条回复` }}
                  </el-button>
                </div>
              </div>

              <!-- 回复列表 -->
              <div
                v-if="expandedReplies.has(answer.id)"
                class="reply-list"
              >
                <div
                  v-for="reply in answers.filter(a => a.parentAnswerId === answer.id)"
                  :key="reply.id"
                  class="reply-item"
                >
                  <div class="reply-header">
                    <div class="user-info">
                      <el-avatar :size="32">{{ reply.userName?.charAt(0) }}</el-avatar>
                      <div class="user-details">
                        <p class="user-name">{{ reply.userName }}</p>
                        <p class="reply-time">{{ formatDate(reply.createTime) }}</p>
                      </div>
                    </div>
                  </div>
                  <div class="reply-content">
                    <div class="content-text" v-html="getSanitizedReplyContent(reply)"></div>
                  </div>
                  <div class="reply-actions">
                    <el-button
                      :icon="Star"
                      @click="likeAnswer(reply.id)"
                      :type="isAnswerLiked(reply.id) ? 'primary' : 'default'"
                      size="small"
                    >
                      {{ reply.likeCount }}
                    </el-button>
                    <el-button
                      :icon="ChatLineRound"
                      @click="replyToAnswer(reply.parentAnswerId || reply.id)"
                      size="small"
                    >
                      回复
                    </el-button>
                    <el-button
                      v-if="canDeleteAnswer(reply)"
                      type="danger"
                      size="small"
                      @click="deleteAnswer(reply.id)"
                      style="margin-left: 10px;"
                    >
                      删除
                    </el-button>
                  </div>
                </div>
              </div>
            </div>

            <div v-if="answers.length === 0" class="no-answers">
              <el-icon><ChatLineRound /></el-icon>
              <p>暂无回答，快来抢沙发吧！</p>
            </div>
          </div>

          <div class="pagination-container">
            <el-pagination
              v-model:current-page="answersPage"
              v-model:page-size="answersPageSize"
              :page-sizes="[10, 20, 50]"
              :total="totalAnswers"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleAnswersSizeChange"
              @current-change="handleAnswersCurrentChange"
            />
          </div>
        </el-card>

        <!-- 回答问题 -->
        <el-card class="answer-form-card">
          <template #header>
            <h3>我来回答</h3>
          </template>

          <el-form
            :model="answerForm"
            :rules="answerRules"
            ref="answerFormRef"
          >
            <el-form-item prop="content">
              <el-input
                v-model="answerForm.content"
                type="textarea"
                :rows="6"
                placeholder="请输入您的回答..."
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="submitAnswer"
                :loading="submitLoading"
              >
                提交回答
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>

      <!-- 右侧相关信息 -->
      <el-col :span="8">
        <!-- 返回界面 -->
        <el-card class="return-card">
          <template #header>
            <h3>操作</h3>
          </template>
          <div class="return-actions">
            <el-button 
              type="primary" 
              @click="goBackToQuestions"
              style="width: 100%; margin-bottom: 10px;"
            >
              返回问答社区
            </el-button>
          </div>
        </el-card>

        <!-- 课程信息 -->
        <el-card class="course-info-card" v-if="question.courseId">
          <template #header>
            <div class="card-header">
              <h3>相关课程</h3>
              <el-tag type="primary" size="small">来自课程</el-tag>
            </div>
          </template>

          <div class="course-info">
            <div class="course-cover">
              <img
                v-if="course.coverImage"
                :src="course.coverImage"
                :alt="course.title"
                class="cover-image"
              />
              <div v-else class="default-cover">
                <el-icon><Collection /></el-icon>
              </div>
            </div>
            <div class="course-details">
              <h4>{{ course.title }}</h4>
              <p>{{ course.description }}</p>
              <el-button
                type="primary"
                size="small"
                @click="viewCourse"
              >
                查看课程
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Star,
  Share,
  User,
  Clock,
  View,
  ChatLineRound,
  Collection,
  Check,
  ArrowDown,
  ArrowRight
} from '@element-plus/icons-vue'
import request from '../../utils/request'
import { getCurrentUser, hasRole } from '../../utils/auth'
import { sanitizeHtml, sanitizeText } from '../../utils/xss'

// 路由
const route = useRoute()
const router = useRouter()


// 表单引用
const answerFormRef = ref()

// 数据
const question = ref({
  id: 0,
  title: '',
  content: '',
  userId: 0,
  userName: '',
  courseId: null,
  courseTitle: '',
  lessonId: null,
  viewCount: 0,
  answerCount: 0,
  likeCount: 0,
  status: 'OPEN',
  createTime: '',
  updateTime: '',
  tags: []
})

const answers = ref([])
const course = ref({
  id: 0,
  title: '',
  description: '',
  coverImage: ''
})

// 折叠相关数据
const expandedReplies = ref<Set<number>>(new Set())

// 当前回复的目标回答ID
const replyToAnswerId = ref<number | null>(null)

const answerForm = reactive({
  content: ''
})

const answerRules = {
  content: [
    { required: true, message: '请输入回答内容', trigger: 'blur' }
  ]
}

const answerSort = ref('default')
const answersPage = ref(1)
const answersPageSize = ref(10)
const totalAnswers = ref(0)
const submitLoading = ref(false)
const isLiked = ref(false)
const likedAnswers = ref<number[]>([])
const canAcceptAnswer = ref(false)

// 获取问题详情
const fetchQuestionDetail = async () => {
  try {
    const questionId = route.params.id
    const response = await request.get(`/api/study/questions/${questionId}`)
    question.value = response.data

    // 增加浏览次数
    await request.put(`/api/study/questions/${questionId}/view`)
    question.value.viewCount += 1

    // 检查用户是否已点赞该问题
    try {
      const likeResponse = await request.get(`/api/study/questions/${questionId}/liked`)
      isLiked.value = likeResponse.data
    } catch (likeError) {
          isLiked.value = false
    }

    // 获取回答列表
    fetchAnswers()

    // 如果有关联课程，获取课程信息
    if (question.value.courseId) {
      fetchCourseInfo(question.value.courseId)
    }

    // 检查当前用户是否可以采纳答案（只有提问者可以）
    checkCanAcceptAnswer()
  } catch (error) {
    ElMessage.error('获取问题详情失败')
  }
}

// 获取回答列表
const fetchAnswers = async () => {
  try {
    const questionId = route.params.id
    const response = await request.get(`/api/study/questions/${questionId}/answers`, {
      params: {
        page: answersPage.value - 1,
        size: answersPageSize.value
      }
    })

    // 检查每个回答的点赞状态
    const answersWithLikeStatus = await Promise.all(response.data.content.map(async (answer: any) => {
      try {
        const likeResponse = await request.get(`/api/study/questions/answers/${answer.id}/liked`)
        answer.isLiked = likeResponse.data
      } catch (error) {
        answer.isLiked = false
      }
      return answer
    }))

    answers.value = answersWithLikeStatus
    totalAnswers.value = response.data.totalElements

  } catch (error) {
    ElMessage.error('获取回答列表失败')
  }
}


// 获取课程信息
const fetchCourseInfo = async (courseId: number) => {
  try {
    const response = await request.get(`/api/study/courses/${courseId}`)
    course.value = response.data
  } catch (error) {
    ElMessage.error('获取课程信息失败')
  }
}

// 检查当前用户是否可以采纳答案
const checkCanAcceptAnswer = async () => {
  try {
    // 获取当前用户信息
    const currentUser = getCurrentUser()
    if (!currentUser || !currentUser.id) {
      canAcceptAnswer.value = false
      return
    }
    
    // 检查当前用户是否是问题的提问者
    if (question.value && question.value.userId) {
      canAcceptAnswer.value = currentUser.id === question.value.userId
    } else {
      canAcceptAnswer.value = false
    }
  } catch (error) {
    canAcceptAnswer.value = false
  }
}

// 检查用户是否有权限删除问题
const canDeleteQuestion = (question: any) => {
  // 获取当前用户信息
  const currentUser = getCurrentUser()
  
  // 如果没有用户信息，返回false
  if (!currentUser || !currentUser.id) {
    return false
  }
  
  
  // 问题创建者可以删除
  if (question.userId === currentUser.id) {
    return true
  }
  
  // 检查用户角色
  
  // 管理员可以删除所有问题
  if (hasRole('ADMIN')) {
    return true
  }
  
  // 教师可以删除课程相关问题
  if (hasRole('LECTURER') && question.courseId) {
    return true
  }
  
  return false
}

// 检查用户是否有权限删除回答
const canDeleteAnswer = (answer: any) => {
  // 获取当前用户信息
  const currentUser = getCurrentUser()
  
  // 如果没有用户信息，返回false
  if (!currentUser || !currentUser.id) {
    return false
  }
  
  
  // 回答创建者可以删除
  if (answer.userId === currentUser.id) {
    return true
  }
  
  // 检查用户角色
  
  // 管理员可以删除所有回答
  if (hasRole('ADMIN')) {
    return true
  }
  
  // 教师可以删除课程相关问题的回答
  if (hasRole('LECTURER') && answer.questionId) {
    return true
  }
  
  return false
}

// 点赞问题
const likeQuestion = async () => {
  try {
    const questionId = route.params.id
    let response;
    if (isLiked.value) {
      // 取消点赞
      response = await request.post(`/api/study/questions/${questionId}/unlike`)
      isLiked.value = false
      ElMessage.success('已取消点赞')
    } else {
      // 点赞
      response = await request.post(`/api/study/questions/${questionId}/like`)
      isLiked.value = true
      ElMessage.success('点赞成功')
    }
    // 更新问题数据
    question.value = response.data
  } catch (error: any) {
    ElMessage.error(error.response?.data?.message || '操作失败')
    // 回滚前端状态
    if (isLiked.value) {
      isLiked.value = false
    } else {
      isLiked.value = true
    }
  }
}

// 分享问题
const shareQuestion = () => {
  // 复制问题链接到剪贴板
  const url = window.location.href
  navigator.clipboard.writeText(url).then(() => {
    ElMessage.success('链接已复制到剪贴板')
  }).catch(() => {
    ElMessage.error('复制链接失败')
  })
}

// 排序回答
const sortAnswers = () => {
  answersPage.value = 1
  fetchAnswers()
}

// 采纳答案
const acceptAnswer = async (answerId: number) => {
  try {
    await request.post(`/api/study/questions/answers/${answerId}/accept`)
    ElMessage.success('答案采纳成功')

    // 重新获取回答列表以更新状态
    fetchAnswers()

    // 更新问题状态
    question.value.status = 'RESOLVED'
  } catch (error) {
    ElMessage.error('采纳答案失败')
  }
}

// 删除问题
const deleteQuestion = async (questionId: number) => {
  ElMessageBox.confirm('确定要删除这个问题吗？此操作将同时删除所有相关回答。', '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    try {
      const response = await request.delete(`/api/study/questions/${questionId}`)
      ElMessage.success('问题删除成功')
      // 跳转到问题列表页面
      router.push('/study/questions')
    } catch (error) {
      // 显示具体的错误信息
      const errorMessage = error.response?.data || '删除失败'
      ElMessage.error(errorMessage)
    }
  }).catch(() => {
    // 用户取消删除
  })
}

// 删除回答
const deleteAnswer = async (answerId: number) => {
  ElMessageBox.confirm('确定要删除这个回答吗？', '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    try {
      const response = await request.delete(`/api/study/questions/answers/${answerId}`)
      ElMessage.success('回答删除成功')
      // 重新获取回答列表
      fetchAnswers()
    } catch (error) {
      // 显示具体的错误信息
      const errorMessage = error.response?.data || '删除失败'
      ElMessage.error(errorMessage)
    }
  }).catch(() => {
    // 用户取消删除
  })
}

// 点赞回答
const likeAnswer = async (answerId: number) => {
  try {
    const answer = answers.value.find((a: any) => a.id === answerId)
    if (!answer) return

    let response
    if (answer.isLiked) {
      // 取消点赞
      response = await request.post(`/api/study/questions/answers/${answerId}/unlike`)
      answer.isLiked = false
      ElMessage.success('已取消点赞')
    } else {
      // 点赞
      response = await request.post(`/api/study/questions/answers/${answerId}/like`)
      answer.isLiked = true
      ElMessage.success('点赞成功')
    }
    
    // 更新回答数据
    Object.assign(answer, response.data)
  } catch (error: any) {
    ElMessage.error(error.response?.data?.message || '点赞失败')
    // 回滚前端状态
    const answer = answers.value.find((a: any) => a.id === answerId)
    if (answer) {
      answer.isLiked = !answer.isLiked
    }
  }
}

// 回复回答
const replyToAnswer = (answerId: number) => {
  // 设置回复目标
  replyToAnswerId.value = answerId

  // 在回答框中添加@用户名
  const answer = answers.value.find((a: any) => a.id === answerId)
  if (answer) {
    answerForm.content = `@${answer.userName} `
    // 如果是回复回复，展开父级回复
    if (answer.parentAnswerId) {
      expandedReplies.value.add(answer.parentAnswerId)
      expandedReplies.value = new Set(expandedReplies.value)
    } else {
      expandedReplies.value.add(answerId)
      expandedReplies.value = new Set(expandedReplies.value)
    }
  }
  // 滚动到回答框
  document.querySelector('.answer-form-card')?.scrollIntoView({ behavior: 'smooth' })
}

// 提交回答
const submitAnswer = async () => {
  if (!answerFormRef.value) return

  await answerFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      submitLoading.value = true
      try {
        const questionId = route.params.id
        const requestData: any = {
          content: sanitizeHtml(answerForm.content)
        }

        // 如果是回复，设置parentAnswerId
        if (replyToAnswerId.value) {
          // 验证parentAnswerId是否有效（指向顶级回答）
          const parentAnswer = answers.value.find((a: any) => a.id === replyToAnswerId.value && !a.parentAnswerId)
          if (parentAnswer) {
            requestData.parentAnswerId = replyToAnswerId.value
          } else {
            // 检查是否指向一个回复，如果是则找到其父级回答
            const replyAnswer = answers.value.find((a: any) => a.id === replyToAnswerId.value && a.parentAnswerId)
            if (replyAnswer) {
              requestData.parentAnswerId = replyAnswer.parentAnswerId
            } else {
              ElMessage.warning('回复目标无效，请重新选择')
              submitLoading.value = false
              return
            }
          }
        }

        const response = await request.post(`/api/study/questions/${questionId}/answers`, requestData)

        ElMessage.success('回答提交成功')
        answerForm.content = ''
        replyToAnswerId.value = null // 清除回复目标

        // 重新获取回答列表
        answersPage.value = 1
        fetchAnswers()

        // 更新问题的回答数（只有顶级回答才增加计数）
        if (!requestData.parentAnswerId) {
          question.value.answerCount += 1
        }
      } catch (error) {
        ElMessage.error('回答提交失败')
      } finally {
        submitLoading.value = false
      }
    }
  })
}

// 返回问答社区
const goBackToQuestions = () => {
  router.push('/study/questions')
}

// 查看课程
const viewCourse = () => {
  if (course.value.id) {
    router.push(`/study/courses/${course.value.id}`)
  }
}

// 检查回答是否已点赞
const isAnswerLiked = (answerId: number) => {
  const answer = answers.value.find((a: any) => a.id === answerId)
  return answer ? answer.isLiked : false
}

// 切换回复的展开/折叠状态
const toggleReplyExpansion = (answerId: number) => {
  if (expandedReplies.value.has(answerId)) {
    expandedReplies.value.delete(answerId)
  } else {
    expandedReplies.value.add(answerId)
  }
  // 重新创建Set以触发响应式更新
  expandedReplies.value = new Set(expandedReplies.value)
}

// 获取回复
const getReplies = (answerId: number) => {
  // 这里应该从answers中筛选出parentAnswerId等于answerId的回复
  // 由于目前后端还没有实现回复功能，暂时返回空数组
  return []
}

// 分页相关方法
const handleAnswersSizeChange = (val: number) => {
  answersPageSize.value = val
  answersPage.value = 1
  fetchAnswers()
}

const handleAnswersCurrentChange = (val: number) => {
  answersPage.value = val
  fetchAnswers()
}

// 工具方法
const getQuestionStatusType = (status: string) => {
  switch (status) {
    case 'OPEN':
      return 'primary'
    case 'RESOLVED':
      return 'success'
    case 'CLOSED':
      return 'info'
    default:
      return 'info'
  }
}

const getQuestionStatusText = (status: string) => {
  switch (status) {
    case 'OPEN':
      return '开放'
    case 'RESOLVED':
      return '已解决'
    case 'CLOSED':
      return '已关闭'
    default:
      return '未知'
  }
}

// XSS防护函数
const getSanitizedContent = (content: string) => {
  return sanitizeHtml(content);
};

const getSanitizedAnswerContent = (answer: any) => {
  return sanitizeHtml(answer.content || '');
};

const getSanitizedReplyContent = (reply: any) => {
  return sanitizeHtml(reply.content || '');
};

const formatDate = (dateString: string) => {
  if (!dateString) return ''
  return new Date(dateString).toLocaleDateString('zh-CN')
}

// 组件挂载时获取数据
onMounted(() => {
  fetchQuestionDetail()
})
</script>

<style scoped>
.question-detail-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.question-info h2 {
  margin: 0 0 10px 0;
  color: #303133;
}

.question-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 14px;
  color: #909399;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.question-content {
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
}

.content-text {
  line-height: 1.8;
  color: #303133;
}

.question-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}

.question-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.answer-item {
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
}

.answer-item:last-child {
  border-bottom: none;
}

.answer-item.accepted {
  background-color: #f0f9ff;
  border-left: 3px solid #409eff;
  padding-left: 17px;
  margin-left: -20px;
  margin-right: -20px;
  padding-right: 20px;
}

.answer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.user-info {
  display: flex;
  gap: 10px;
}

.user-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.user-name {
  margin: 0;
  font-weight: bold;
  color: #303133;
}

.answer-time {
  margin: 0;
  font-size: 12px;
  color: #909399;
}

.answer-content {
  margin-bottom: 15px;
}

.answer-footer {
  display: flex;
  justify-content: flex-end;
}

.reply-list {
  margin-top: 15px;
  padding-left: 30px;
  border-left: 2px solid #ebeef5;
}

.reply-item {
  padding: 15px 0;
  border-bottom: 1px solid #f0f2f5;
}

.reply-item:last-child {
  border-bottom: none;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.reply-content {
  margin-bottom: 10px;
}

.reply-actions {
  display: flex;
  gap: 10px;
}

.answers-card .card-header {
  align-items: center;
}

.sort-options {
  display: flex;
  align-items: center;
}

.no-answers {
  text-align: center;
  padding: 50px 0;
  color: #909399;
}

.no-answers .el-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.answer-form-card {
  margin-top: 20px;
}

.return-card {
  margin-bottom: 20px;
}

.return-actions {
  padding: 20px;
  text-align: center;
}

.course-info-card {
  margin-bottom: 20px;
}

.course-info-card .card-header {
  justify-content: space-between;
  align-items: center;
}

.course-info {
  display: flex;
  gap: 15px;
}

.course-cover {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 4px;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.default-cover {
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.course-details {
  flex: 1;
}

.course-details h4 {
  margin: 0 0 5px 0;
  color: #303133;
  font-size: 16px;
}

.course-details p {
  margin: 0 0 10px 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
